/**
 * Created by caoning on 2017/12/13.
 * 语音画册
 */

// 微信购票数据
// loadData({
//     type: 'get',
//     url: '/bigdata/manage/voice/info',
//     data: {},
//     interval: 0,
//     callback: function (res) {
//         var tpl = $("#time").html();
//         $("#detail").html(soda(tpl, res.result))
//     }
// })
// 累计播放时长列表
// function playDetails(data) {
//     var tpl = $("#time").html();
//     $("#detail").html(soda(tpl, data.data));
// }
// TOP20最受欢迎语音排名
// var tpl = `  <li  soda-repeat="item in list" >
//                        <div class="ico">{{$index+1}}</div>
//                        <div class="name">{{item.name}}</div>
//                        <div class="num">{{item.value}}</div>
//                    </li>`;
// var data = {
//     list:[
//         {name:"山门广场",value: 45639},
//         {name:"桃花湾",value: 45639},
//         {name:"一线天",value: 45639},
//         {name:"红石河景区",value: 45639},
//         {name:"羊洲地",value: 45639},
//         {name:"百年好合树",value: 45639},
//         {name:"蘑菇石",value: 45639},
//         {name:"点将台",value: 45639},
//         {name:"百年老屋",value: 45639},
//         {name:"珍珠瀑",value: 45639},
//         {name:"丹凤台",value: 45639},
//         {name:"乌鸦岭",value: 45639},
//         {name:"如画台",value: 45639},
//         {name:"西连",value: 45639},
//         {name:"天壶瀑布",value: 45639},
//         {name:"试胆台",value: 45639},
//         {name:"求官宫",value: 45639},
//         {name:"老君庵",value: 45639},
//         {name:"归真台",value: 45639},
//         {name:"黑龙潭",value: 45639},
//     ]
// };
// function ranking(para) {
//     let data = {};
//     data.list = para;
//     $("#detail2").html(soda(tpl, data));
// }
// loadData({
//     type: 'get',
//     url: '/bigdata/manage/voice/top20',
//     data: {},
//     interval: 0,
//     callback: function (res) {
//         ranking(res.result)
//     }
// })

// 搜索
$("#search").on('click', function () {
    var t1 = $("#tic-start").val();
    var t2 = $("#tic-end").val();
    if ((!t1) || (!t2) || ((!t1) && (!t2))) {
        dyw.box.alert('请选择查询日期');
        return false
    }
    // loadData({
    //     type: 'get',
    //     url: '/bigdata/manage/voice/trend-and-ratio',
    //     data: {
    //         start_time: t1,
    //         end_time: t2
    //     },
    //     interval: 0,
    //     callback: function (res) {
    //         if (res.code == 1) {
    //             dyw.box.alert(res.msg);
    //             return false
    //         }

    //         optionTingqubili.series[0].data = res.result.ratio.data;
    //         optionTingqubili.legend.data = res.result.ratio.legend;
    //         var tingqubili = echarts.init(document.getElementById('tingqubili'));
    //         tingqubili.setOption(optionTingqubili);

    //         TingqucishuOption.series[0].data = res.result.trend.data[0].data;
    //         TingqucishuOption.series[0].name = res.result.trend.data[0].name;
    //         TingqucishuOption.series[1].data = res.result.trend.data[1].data;
    //         TingqucishuOption.series[1].name = res.result.trend.data[1].name;
    //         TingqucishuOption.series[2].data = res.result.trend.data[2].data;
    //         TingqucishuOption.series[2].name = res.result.trend.data[2].name;
    //         TingqucishuOption.xAxis[0].data = res.result.trend.xAxis;
    //         TingqucishuOption.legend.data = res.result.trend.legend;
    //         var tingqucishu = echarts.init(document.getElementById('tingqucishu'));
    //         tingqucishu.setOption(TingqucishuOption);
    //     }
    // })
})

// 听取次数、听取比例
// loadData({
//     type: 'get',
//     url: '/bigdata/manage/voice/trend-and-ratio',
//     data: {},
//     interval: 0,
//     callback: function (res) {
//         $("#tic-start").val(res.result.start_time);
//         $("#tic-end").val(res.result.end_time);
//         optionTingqubili.series[0].data = res.result.ratio.data;
//         optionTingqubili.legend.data = res.result.ratio.legend;
//         var tingqubili = echarts.init(document.getElementById('tingqubili'));
//         tingqubili.setOption(optionTingqubili);
//         TingqucishuOption.series[0].data = res.result.trend.data[0].data;
//         TingqucishuOption.series[0].name = res.result.trend.data[0].name;
//         TingqucishuOption.series[1].data = res.result.trend.data[1].data;
//         TingqucishuOption.series[1].name = res.result.trend.data[1].name;
//         TingqucishuOption.series[2].data = res.result.trend.data[2].data;
//         TingqucishuOption.series[2].name = res.result.trend.data[2].name;
//         TingqucishuOption.xAxis[0].data = res.result.trend.xAxis;
//         TingqucishuOption.legend.data = res.result.trend.legend;
//         var tingqucishu = echarts.init(document.getElementById('tingqucishu'));
//         tingqucishu.setOption(TingqucishuOption);
//     }
// })

// 听取比例
var tingqubili = echarts.init(document.getElementById('tingqubili'));
var optionTingqubili = {
    // #4a86d1
    color: ['#4bb6fc', '#0069ad', '#003d64'],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/> {b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        right: '0',
        bottom: '15%',
        itemWidth: 15,
        itemHeight: 10,
        textStyle: {
            color: '#fff'
        },
        data: [ '演出','景点']
    },
    series: [
        {
            "center": [
                "35%",
                "55%"
            ],
            name: '听取比例',
            type: 'pie',
            radius: ['50%', '70%'],
            left: 6,
            top: 30,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '12',
                        color: '#fff'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                {value: 500, name: '演出'},
                { value: 100, name: '景点' , itemStyle: {
                    normal: {
                        color: "#beeff8"
                    },

                }}
            ]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
tingqubili.setOption(optionTingqubili);

// 听取次数
var tingqucishu = echarts.init(document.getElementById('tingqucishu'));
var TingqucishuOption = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['演出', '景点'],
        right: '10%',
        top: '5%',
        textStyle: {
            color: '#fff'
        }
    },
    grid: {
        height: '80%',
        left: '5%',
        bottom: '2%',
        containLabel: true
    },
    textStyle: {
        color: "#fff"
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            data: ['08-11', '08-12', '08-13', '08-14', '08-15', '08-16', '08-17']
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#2f2f2f'
                }
            }
        }
    ],
    series: [
        {
            name: '演出',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbol: 'circle',
            symbolSize: 3,
            data: [80, 90, 280, 160, 200, 220, 120],
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0.1,
                        color: 'rgba(75, 182, 252, 0.3)'
                    }, {
                        offset: 0.9,
                        color: 'rgba(75, 182, 252, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(75,182,252)'
                }
            }
        },
        {
            name: '景点',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbol: 'circle',
            symbolSize: 3,
            data: [180, 200, 140, 270, 60, 150, 90],
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0.1,
                        color: 'rgba(217, 28, 37, 0.3)'
                    }, {
                        offset: 0.9,
                        color: 'rgba(217, 28, 37, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(217,28,37)'
                }
            }
        },
        {
            name:'八里沟',
            type:'line',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbol: 'circle',
            symbolSize: 3,
            smooth: true,
            showSymbol: true,
            symbol: 'circle',
            symbolSize: 3,
            data:[80, 90, 280, 160, 200, 220, 120],
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0.1,
                        color: 'rgba(251, 236, 71, 0.1)'
                    }, {
                        offset: 0.9,
                        color: 'rgba(251, 236, 71, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(251,236,71)'
                }
            }
        }
    ]
};
tingqucishu.setOption(TingqucishuOption);
// 使用刚指定的配置项和数据显示图表。
// tingqucishu.setOption(TingqucishuOption);